<template>
  <div>
    <cityheader></cityheader>
    <citysearch :cities="cities"></citysearch>
    <citylist :hotCities="hotCities"  :cityLetter="cityLetter"></citylist>
  </div>
</template>

<script>
  import CityHeader from './components/CityHeader'
  import CitySearch from './components/CitySearch'
  import CityList from './components/CityList'
  import axios from 'axios'

  export default {
    name: "City",
    components: {
      "cityheader": CityHeader,
      "citysearch": CitySearch,
      "citylist": CityList,
    },
    data() {
      return {
        hotCities:[],
        cityLetter:[],
        cities:{}
      }
    },
    methods: {
  },
    mounted() {
      axios.get('/api/city.json').then((res)=>{
        const data = res.data.data;
        // console.log(data);
        this.cities = data.cities;
        this.hotCities = data.hotCities;
        this.cityLetter = data.cityLetter;
      })
    }
  }

</script>

<style lang="stylus" scoped>

</style>
